<template>
	<view>
		<view class="card">
			<view class="verification">
				核销码：{{this.repairReservation.verificationCode}}
			</view>
			<!-- <uqrcode ref="uqrcode" canvas-id="qrcode" value="sssss" size="93" :options="{ margin: 10 }"></uqrcode> -->
			<image :src="this.repairReservation.verificationImg" mode="" class="img"></image>
		</view>


		<view class="title">维修信息</view>
		<view class="card">
			<view class="Item">
				<view>
					维修单号：
				</view>
				<view>
					121212112487878
				</view>
			</view>
			<view class="Item">
				<view>
					维修状态：
				</view>
				<view v-if="this.repairReservation.status == 0">
					已预约
				</view>
				<view v-if="this.repairReservation.status == 1">
					进行中
				</view>
				<view v-if="this.repairReservation.status == 2">
					已完成
				</view>
			</view>
			<view class="Item">
				<view>
					车主姓名：
				</view>
				<view>
					{{this.repairReservation.name}}
				</view>
			</view>
			<view class="Item">
				<view>
					联系方式：
				</view>
				<view>
					{{this.repairReservation.phone}}
				</view>
			</view>
			<view class="Item">
				<view>
					维修方式：
				</view>
				<view v-if="this.repairReservation.type == 0">
					到店维修
				</view>
				<view v-if="this.repairReservation.type == 1">
					上门取车
				</view>
			</view>

			<view class="Item">
				<view v-if="this.repairReservation.type == 1">
					取车位置：
				</view>
				<view v-if="this.repairReservation.type == 1">
					山阳区32号
				</view>
			</view>
			<view class="Item">
				<view>
					预约日期：
				</view>
				<view>
					{{this.repairReservation.reservationTime}}
				</view>
			</view>
			<view class="Item">
				<view>
					提交日期：
				</view>
				<view>
					{{this.repairReservation.submitTime}}
				</view>
			</view>
		</view>
		<view class="title">车辆信息</view>
		<view class="card">
			<view class="Item">
				<view>
					车辆类型：
				</view>
				<view>
					{{this.repairReservation.carType.name}}
				</view>
			</view>
			<view class="Item">
				<view>
					车牌号：
				</view>
				<view>
					{{this.repairReservation.carNum}}
				</view>
			</view>
			<view class="carPhoto">
				<view>
					整车照片：
				</view>
				<view class="images">
					<image v-for="(item,index) in this.vehiclePhotos" class="evaluateimg" :src="item" mode=""></image>
					<!-- {{this.repairReservation.vehiclePhotos}} -->

				</view>
			</view>
			<view class="carPhoto">
				<view>
					维修部分照片：
				</view>
				<view class="images">
					<image v-for="(item,index) in this.repairPhotos" class="evaluateimg" :src="item" mode=""></image>
					<!-- {{this.repairReservation.repairPhotos}} -->
				</view>
			</view>
		</view>

		<view class="cancel" @click="cancel()">
			取消预约
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				repairReservation: '',
				vehiclePhotos: [],
				repairPhotos: [],
				token: '',
				repairId: ''
			}
		},
		methods: {

			cancel() {
				uni.showModal({
					title: '提示',
					content: '确认取消预约吗？',
					success:(res)=> {
						if (res.confirm) {
							uni.request({
								url: 'http://localhost/dev-api/merchant/reservation/delete/' + this
									.repairId,
								method: 'DELETE',
								header: {
									'Authorization': this.token
								},
								success(resp) {
									console.log('111', resp);
									if (resp.data.code == 200) {
										uni.showToast({
											icon: 'success',
											title: '维修预约取消成功!'
										})
										setTimeout(() => {
											uni.redirectTo({
												url: '/pages/my/myRepair/myRepair'
											})
										}, 1000)
									} else {
										uni.showToast({
											icon: 'fail',
											title: '维修预约取消失败!'
										})
									}
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			onLoad(event) {
				console.log(event)
				const token = uni.getStorageSync('Token');
				this.token = token
				this.repairId = event.id
				uni.request({
					url: 'http://localhost/dev-api/merchant/reservation/' + event.id,
					method: 'GET',
					header: {
						'Authorization': token
					},
					success: (resp) => {
						console.log(resp.data.data);
						this.repairReservation = resp.data.data;
						this.vehiclePhotos = this.repairReservation.vehiclePhotos.split(',');
						this.repairPhotos = this.repairReservation.repairPhotos.split(',')
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.verification {
		text-align: center;
		font-size: 18px;
		margin-top: 10px;
	}

	.uqrcode {
		margin: auto;
		width: 93px;
		height: 93px;
	}

	.img {
		margin: auto;
		width: 93px;
		height: 93px;
		margin-left: 210rpx;
	}

	.title {
		margin-left: 20px;
		font-size: 18px;
		height: 25px;
		line-height: 25px;
		margin-bottom: 5px;
	}

	.card {
		width: 313px;
		border-radius: 5px;
		box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
		margin: auto;
		padding-left: 15px;
		padding-right: 20px;
		margin-bottom: 20px;
	}

	.Item {
		display: flex;
		justify-content: space-between;
		height: 46px;
		line-height: 46px;
	}

	.Item>view:nth-child(1) {
		font-weight: bold;
	}

	.evaluateimg {
		width: 70px;
		height: 60px;
		margin-right: 30px;
		margin-bottom: 20px;
	}

	.images {
		margin-left: 27px;
	}

	.carPhoto {}

	.carPhoto>view:nth-child(1) {
		font-weight: bold;
		white-space: nowrap;
	}

	.images {
		display: flex;
		justify-content: space-evenly;
		margin-top: 20rpx;
	}

	.cancel {
		text-align: center;
		line-height: 30px;
		width: 80px;
		height: 30px;
		color: #1D6FFF;
		border: 2px solid #0084Ff;
		border-radius: 5px;
		float: right;
		margin-right: 10px;
		margin-bottom: 10px;
	}
</style>